<template>
	<div class="home">
		<div class="news">
			<!-- <button @click="xsxx">0000</button> -->
			<!-- {{$store.state.jssj.data}} -->
			<div class="news-title">群聊</div>
			<div class="news-content">
				<div class="content" v-for="(item, index) in information" :key="index">
					<div :class="item.id == name ? 'right' : 'left'">
						<div class="neron_nr">
						<div class="neron_idw">
							{{ item.id }}

						</div>
						<div class="neron_msgw">
							<span class="neron_wb">
							{{ item.msg }}
							</span>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="input-box">
			<div class="send-input">
				<div class="underline">
					<input id="input" type="text" v-model="message" @keyup.enter="send" />
				</div>
				<div class="send-btn" @click="send">发送 </div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				message: "",
				information: [],
				name: "",
			};
		},
		onshow() {
			this.name = this.$store.state.username;
			console.log(this.name);
		},
		computed: {
			listData() {
				return this.$store.state.jssj;
			},
		},
		//监听执行
		watch: {
			listData(_jssj) {
				this.information.push(_jssj);
				console.log(this.information);

			},
		},
		mounted() {
			this.$store.dispatch("connectSocket");
		},
		methods: {
			send() {
				if(!this.message) return  
				this.name = this.$store.state.username;
				this.name = localStorage.username
				this.$store.state.socket.emit("onMessage", {
					msg: this.message,
					id: this.name,
				});
				let input = document.getElementById("input");
				input.value = "";
				this.message = ''
			},
		},
	};
</script>
<style scoped>
	.home {
		width: 100vw;
		height: 100vh;
		background: #f5f5f5;
	}

	.news {
		width: 100%;
		border: 1px solid #c0c7c9;
		height: 700px;
		/* border-radius: 15px; */
	}

	.news-content {
		overflow-y: scroll;
		height: 555px;
		margin-top: 50px;
		width: 100%;
		padding: 5vw;
		margin: 0 auto;
		/* border: 1px solid #000; */
	}

	.news-title {
		background: #848388;
		height: 50px;
		line-height: 50px;
		text-align: center;
		/* border-radius: 15px 15px 0 0; */
		color: #ebe5e5;
		font-size: 8vw;
		font-weight: 500;
	}

	.input-box {
		width: 100%;
		background: #e6ead7;
		position: fixed;
		bottom: 0;
		height: 55px;
		box-shadow: 4rpx 8rpx 0rpx 9rpx rgba(0, 0, 0, 0.3);
	}

	.input-box input {
		width: 100%;
		height: 40px;
		/* border-radius: 15px; */
		border: none;
	}

	.underline {
		width: 80%;
		/* border-bottom: 2px solid #42b983; */
		/* margin-left: 10px; */
	}

	.send-input {
		display: flex;
		justify-content: space-between;
		/* margin-top: 6px; */
		width: 90%;
		margin: 6px auto;
	}

	.send-btn {
		background: #7a7e6e;
		color: #d6e5e9;
		font-weight: 800;
		width: 50px;
		height: 40px;
		line-height: 40px;
		/* text-align: center; */
		border-radius: 11px;
	}

	.content {
		display: block;
		font-size: 5vw;
		
		width: 100%;
	}

	

	.neron_idw {
		font-size: 3.8vw;
		line-height: 10vw;
		padding: 1vw;
	}

	.neron_msgw {
		font-size: 7vw;
		border-radius: 3vw;
			margin: 4vw;
			margin-top: 1vw;
		background-color: #cdd0d1;
			padding: 2.1vw;
				border-radius:3vw ;


	}

	.left {
		display: flex;
		flex-direction: row;
	}

	.right {
		display: flex;
		flex-direction: row-reverse;
		text-align: right;
		
	}

</style>
